<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {margin: 0; background-color: #eee}
		ul,p {margin: 0; padding: 0;}
		li {list-style: none; background: #45dfff;}
		#ul1 li {float: left;margin: 10px; border: 1px solid #666;}
		img {width: 200px; height: 130px; border:none; vertical-align: top;}
		.goods {height:30px; line-height:30px; border-bottom: 1px dashed #666;}
		.price {height: 30px; line-height: 30px;}

		#buy {clear: both; width: 540px; height: 300px; padding:0 10px; border: 1px solid #666; position: absolute; top: 300px; left: 200px; background-color: #74ed45}
		#buy p {width:540px; height:30px;border-bottom: 1px dashed #000;}
		#buy span {width: 120px; height: 30px; line-height: 30px; float: left;}
		#buy .per,#buy .cost {width:150px;}
		#sum {float: right;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oUl = document.getElementById('ul1');
		var oBuy = document.getElementById('buy');
		var aLi = oUl.getElementsByTagName('li');
		var json = {};		//用来判断是否有重复拖拽的情况
		var sum = null;


		for (var i = 0; i < aLi.length; i++) {
			// var aP = aLi[i].getElementsByTagName('p');		不应该放这里
			aLi[i].draggable = 'true';

			aLi[i].ondragstart = function (ev) {
				var ev = ev || event;
				var aP = this.getElementsByTagName('p');

				ev.dataTransfer.setData('mark1', aP[0].innerHTML);
				ev.dataTransfer.setData('mark2', aP[1].innerHTML);

				ev.dataTransfer.setDragImage(this, 0, 0);
			};

			oBuy.ondragover = function () {
				return false;
			};

			oBuy.ondrop = function (ev) {
				var M1 = ev.dataTransfer.getData('mark1');
				var M2 = ev.dataTransfer.getData('mark2');

				var arr = M2.match(/\d+/g);			//正则找出数字，输出为数组，即如[100]
				var str = arr.join('');				//数组转成字符串
				var iNum = 0;

				if ( !json[M1] ) {
					var oP = document.createElement('p');

					for (var i = 0; i < 4; i++) {
						var oSpan = document.createElement('span');
						oP.appendChild(oSpan);
					};
					var aSpan = oP.getElementsByTagName('span');

					/*aSpan[0].className = 'name'
					aSpan[1].className = 'amount';
					aSpan[2].className = 'per';
					aSpan[3].className = 'cost';*/

					aSpan[0].innerHTML = M1;
					aSpan[1].innerHTML = 1;;
					aSpan[2].innerHTML = M2;
					aSpan[3].innerHTML = '合计: ￥' + parseInt(str);		//直接乘以str也行，会有隐式类型转换
					oBuy.appendChild(oP);

					json[M1] = 1;			//更新记录一下已经进来过了
				} else{
					var aSpan = oBuy.getElementsByTagName('span');

					for (var i = 0; i < aSpan.length; i++) {
						if (aSpan[i].innerHTML == M1) {
							aSpan[i+1].innerHTML = parseInt(aSpan[i+1].innerHTML) + 1;
							aSpan[i+3].innerHTML = '合计: ￥' + parseInt(aSpan[i+1].innerHTML) * parseInt(str);
						};
					};
				};

				if (!sum) {
					sum = document.createElement('div');
					sum.id = 'sum';
				};
				var aP = oBuy.getElementsByTagName('p');

				for (var i = 0; i < aP.length; i++) {
					var arr1 = aP[i].children[3].innerHTML.match(/\d+/g);
					var str1 = arr1.join('')
					iNum += parseInt(str1);
				};
				sum.innerHTML = '总计: ￥' + iNum;
				oBuy.appendChild(sum);

				return false;
			}
		};
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>
			<img src="1.jpg" alt="" />
			<p class="goods">小袋鼠</p>
			<p class="price">价格: ￥100</p>
		</li>
		<li>
			<img src="2.jpg" alt="" />
			<p class="goods">美喵</p>
			<p class="price">价格: ￥120</p>
		</li>
		<li>
			<img src="3.jpg" alt="" />
			<p class="goods">鳄鱼</p>
			<p class="price">价格: ￥30</p>
		</li>
		<li>
			<img src="4.jpg" alt="" />
			<p class="goods">奇石</p>
			<p class="price">价格: ￥23</p>
		</li>
	</ul>
	<div id="buy">
		<!-- <p>
			<span class="name">商品2</span>
			<span class="amount">1</span>
			<span class="per">价格: ￥120</span>
			<span class="cost">合计: ￥120</span>
		</p> -->
	</div>
</body>
</html>